<template>
	<div class="myTeam navBar">
		<van-nav-bar :title="$route.meta.title" left-arrow @click-left="$routerBack" />
		<div class="mt_top">
			<p>2363.00</p>
			<p>团队收益</p>
		</div>

		<div class="tab_select">
			<div v-for="item,index in 2" :key="index" @click="tab_index = index" :class=" index == tab_index ? 'on' : ''">
				{{index == 0 ? '直推会员' : '团队会员'}}
			</div>

			<div class="ts_solid" :style=" tab_index == 0 ? 'left:1.25rem' : 'left:5.05rem'"></div>
		</div>

		
		<div v-if="tema_list == null" style="text-align: center;padding-top: 2rem;">
			<van-loading size="24px">加载中...</van-loading>
		</div>

		<div class="team_view" v-if="tema_list">
				

			<transition name="fold-right-effect">
				<div class="team_list" v-if="tab_index == 0">
					<div class="tl_item" v-for="item,index in tema_list.zt.list" :key="index">
						<img class="tli_left" :src=" 'http://www.facai888008.cn/' + item.avatar" alt="">

						<div class="tli_right">
							<p>ID：{{item.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</p>
							<div>
								<div>
									等级：<img src="../../assets/user/v1.png" alt="">
								</div>

								<p>2020-06-02</p>
							</div>
						</div>
					</div>
				</div>
			</transition>

			<transition name="fold-left-effect">
				<div class="team_list" v-if="tab_index == 1">
					<div class="tl_item" v-for="item,index in tema_list.td.list" :key="index">
						<img class="tli_left" :src=" 'http://www.facai888008.cn/' + item.avatar" alt="">

						<div class="tli_right">
							<p>ID：{{item.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</p>
							<div>
								<div>
									等级：<img src="../../assets/user/v1.png" alt="">
								</div>

								<p>2020-06-02</p>
							</div>
						</div>
					</div>
				</div>
			</transition>
			
			<div v-if="tema_list.zt.list.length <= 0 && tab_index == 0" style="text-align: center;padding-top: 2rem;">
				<p style="color: rgba(255,255,255,.5);font-size: .28rem;">暂无数据</p>
			</div>
			
			<div v-if="tema_list.td.list.length <= 0 && tab_index == 1" style="text-align: center;padding-top: 2rem;">
				<p style="color: rgba(255,255,255,.5);font-size: .28rem;">暂无数据</p>
			</div>
			
		</div>
	</div>
</template>

<script>
	export default {
		name: "myTeam",
		async created() {
			try {

				const data = await this.$apis.User.teaminfo()

				this.tema_list = data.data
				
			} catch (e) {
				//TODO handle the exception
			}

		},
		data() {
			return {
				tema_list: null,

				tab_index: 0
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '../../style/navBar.less';
	@import '../../style/transition.less';

	.myTeam {
		.team_view {
			position: relative;

			.team_list {
					width: 100%;
				position: absolute;

				.tl_item {
					padding: .4rem .35rem .3rem .35rem;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #1A304F;

					.tli_left {
						width: .9rem;
						height: .9rem;
						border-radius: 50%;
					}

					.tli_right {
						width: 5.6rem;
						font-size: .3rem;
						color: #94E9FF;

						>div {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 0.05rem;
						}
					}
				}
			}

		}

		.mt_top {
			width: 100%;
			height: 2rem;
			background: rgba(17, 32, 55, 1);
			box-shadow: inset 0px 0px .3rem 0px rgba(28, 176, 212, 1);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			>p:nth-child(1) {
				font-size: .46rem;
				color: #8FE2F8;
			}

			>p:nth-child(2) {
				font-size: .28rem;
				color: #8FE2F8;
				margin-top: .1rem;
			}
		}

		.tab_select {
			position: relative;
			display: flex;
			height: .88rem;

			>div {
				flex: 1;
				color: #3A627E;
				font-size: .28rem;

				display: flex;
				align-items: center;
				justify-content: center;
			}

			.on {
				color: #94E9FF;
			}

			.ts_solid {
				transition: all .5s;
				position: absolute;
				width: 1.18rem;
				height: 0.02rem;
				background-color: #94E9FF;
				bottom: 0;
			}
		}
	}
</style>
